<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>轮播图 - 我的Hugo博客</title><meta name="Description" content=""><meta property="og:title" content="轮播图" />
<meta property="og:description" content=" VUE &#43; ELEMENT UI 实现简单轮播图效果
 遍历imgArray数组得到item，绑定到img标签中的src属性中，:src可以用v-bind:src，class是设置图片的样式，可以不写。
&lt;template&gt; &lt;el-carousel indicator-position=&#34;outside&#34;&gt; &lt;el-carousel-item v-for=&#34;item in imgArray&#34;&gt; &lt;img :src=&#34;item&#34; class=&#34;rightImg&#34;&gt; &lt;/el-carousel-item&gt; &lt;/el-carousel&gt; &lt;/template&gt; 这里在script中设置数组,需要用到require关键字，本地图片路径放到data中需要加require
&lt;script&gt; export default { name: &#34;XXXXXXX&#34;, data() { return { imgArray: [ require(&#39;../assets/1.jpg&#39;), require(&#39;../assets/2.jpg&#39;), require(&#39;../assets/3.jpg&#39;) ] } } } &lt;/script&gt; &lt;style scoped&gt; .rightImg { width: 960px; height: 540px; } &lt;/style&gt; " />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://xls7771.gitee.io/posts/%E8%BD%AE%E6%92%AD%E5%9B%BE/" />
<meta property="article:published_time" content="2020-10-27T23:36:36+08:00" />
<meta property="article:modified_time" content="2020-10-27T23:36:36+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="轮播图"/>
<meta name="twitter:description" content=" VUE &#43; ELEMENT UI 实现简单轮播图效果
 遍历imgArray数组得到item，绑定到img标签中的src属性中，:src可以用v-bind:src，class是设置图片的样式，可以不写。
&lt;template&gt; &lt;el-carousel indicator-position=&#34;outside&#34;&gt; &lt;el-carousel-item v-for=&#34;item in imgArray&#34;&gt; &lt;img :src=&#34;item&#34; class=&#34;rightImg&#34;&gt; &lt;/el-carousel-item&gt; &lt;/el-carousel&gt; &lt;/template&gt; 这里在script中设置数组,需要用到require关键字，本地图片路径放到data中需要加require
&lt;script&gt; export default { name: &#34;XXXXXXX&#34;, data() { return { imgArray: [ require(&#39;../assets/1.jpg&#39;), require(&#39;../assets/2.jpg&#39;), require(&#39;../assets/3.jpg&#39;) ] } } } &lt;/script&gt; &lt;style scoped&gt; .rightImg { width: 960px; height: 540px; } &lt;/style&gt; "/>
<meta name="application-name" content="我的Hugo博客">
<meta name="apple-mobile-web-app-title" content="我的Hugo博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://xls7771.gitee.io/posts/%E8%BD%AE%E6%92%AD%E5%9B%BE/" /><link rel="prev" href="https://xls7771.gitee.io/posts/redis/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "轮播图",
        "inLanguage": "zh-cn",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/xls7771.gitee.io\/posts\/%E8%BD%AE%E6%92%AD%E5%9B%BE\/"
        },"genre": "posts","wordcount":  50 ,
        "url": "https:\/\/xls7771.gitee.io\/posts\/%E8%BD%AE%E6%92%AD%E5%9B%BE\/","datePublished": "2020-10-27T23:36:36+08:00","dateModified": "2020-10-27T23:36:36+08:00","publisher": {
            "@type": "Organization",
            "name": "xls"},"author": {
                "@type": "Person",
                "name": "xls"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="我的Hugo博客">我的Hugo博客</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="我的Hugo博客">我的Hugo博客</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">轮播图</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>xls</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2020-10-27">2020-10-27</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 50 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 1 分钟&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents"></nav></div>
            </div><div class="content" id="content"><blockquote>
<p>VUE + ELEMENT UI 实现简单轮播图效果</p>
</blockquote>
<p>遍历imgArray数组得到item，绑定到img标签中的src属性中，:src可以用v-bind:src，class是设置图片的样式，可以不写。</p>
<div class="highlight"><pre class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">el-carousel</span> <span class="na">indicator</span><span class="nt">-position</span><span class="err">=&#34;</span><span class="na">outside</span><span class="err">&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">el-carousel-item</span> <span class="nt">v-for</span><span class="s">=&#34;item in imgArray&#34;&gt;
</span><span class="s">      &lt;img :src=&#34;item&#34; class=&#34;rightImg&#34;</span><span class="p">&gt;</span>
    <span class="err">&lt;/</span><span class="na">el</span><span class="nt">-carousel-item</span><span class="p">&gt;</span>
  <span class="o">&lt;</span><span class="err">/el-carousel&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
</code></pre></div><p>这里在script中设置数组,需要用到require关键字，本地图片路径放到data中需要加require</p>
<div class="highlight"><pre class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="kr">export</span> <span class="k">default</span> <span class="p">{</span>
  <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;XXXXXXX&#34;</span><span class="p">,</span>
  <span class="nx">data</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span>
      <span class="nx">imgArray</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../assets/1.jpg&#39;</span><span class="p">),</span>
        <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../assets/2.jpg&#39;</span><span class="p">),</span>
        <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../assets/3.jpg&#39;</span><span class="p">)</span>
      <span class="p">]</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div><div class="highlight"><pre class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">style</span> <span class="na">scoped</span><span class="p">&gt;</span>
<span class="p">.</span><span class="nx">rightImg</span> <span class="p">{</span>
  <span class="nx">width</span><span class="o">:</span> <span class="mi">960</span><span class="nx">px</span><span class="p">;</span>
  <span class="nx">height</span><span class="o">:</span> <span class="mi">540</span><span class="nx">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</code></pre></div></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2020-10-27</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://xls7771.gitee.io/posts/%E8%BD%AE%E6%92%AD%E5%9B%BE/" data-title="轮播图"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://xls7771.gitee.io/posts/%E8%BD%AE%E6%92%AD%E5%9B%BE/"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Buffer" data-sharer="buffer" data-url="https://xls7771.gitee.io/posts/%E8%BD%AE%E6%92%AD%E5%9B%BE/" data-title="轮播图"><i class="fab fa-buffer fa-fw"></i></a><a href="javascript:void(0);" title="分享到 百度" data-sharer="baidu" data-url="https://xls7771.gitee.io/posts/%E8%BD%AE%E6%92%AD%E5%9B%BE/" data-title="轮播图"><i data-svg-src="/lib/simple-icons/icons/baidu.min.svg"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/redis/" class="prev" rel="prev" title="Redis"><i class="fas fa-angle-left fa-fw"></i>Redis</a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.74.2">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2020</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">xls</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/autocomplete/autocomplete.min.js"></script><script type="text/javascript" src="/lib/lunr/lunr.min.js"></script><script type="text/javascript" src="/lib/lunr/lunr.stemmer.support.min.js"></script><script type="text/javascript" src="/lib/lunr/lunr.zh.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"search":{"highlightTag":"em","lunrLanguageCode":"zh","lunrSegmentitURL":"/lib/lunr/lunr.segmentit.js","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":30}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
